<template>
  <div class="detail-arcticle__page">
    <detailSlotModule :upInfo="upInfo">
      <contentModule :article="archiveDetail" />
      <!-- 评论模块 -->
      <template #comment>
        <replyModule :aid="aid" />
      </template>
      <!-- 相关推荐 -->
      <template #recommend>
        <videoCard :archive="archive" :key="archive.aid" :type="archiveType" v-for="archive in aboutArchive" />
      </template>
    </detailSlotModule>
  </div>
</template>

<script>
import detailSlotModule from '@/components/detailSlot/index.vue';
import contentModule from './components/contentModule.vue';
import replyModule from '@/components/replyModule/index.vue';
import videoCard from '@/components/videoCard.vue';
import { getArchiveDetailAPI, getArchivesByRandomAPI } from '@/api/archive';

export default {
    components: {
        detailSlotModule,
        contentModule,
        videoCard,
        replyModule,
    },
    data() {
        return {
            archiveType: 4,
            archiveDetail: {},
            aboutArchive: [],
        };
    },
    computed: {
        aid() {
            try {
                const { aid } = this.$route.params;
                return atob(aid);
            } catch (error) {
                return 0;
            }
        },
        upInfo() {
            return this.archiveDetail.author;
        },
    },
    created() {
        this.getArchiveDetail();
        this.getArchivesByRandom();
    },
    methods: {
        async getArchiveDetail() {
            const { data } = await getArchiveDetailAPI(this.aid);
            this.archiveDetail = data;
        },
        async getArchivesByRandom() {
            const { data } = await getArchivesByRandomAPI(this.archiveType, 10);
            this.aboutArchive = data;
        },
    },
};
</script>
